.sidebar-container {
  // transition: width 0.28s;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  width: $sidebarWidth;
  height: 100%;
  padding: 0;
  box-shadow: 0px 0px 12px 1px rgba(0, 0, 0, 0.12);
  background-color: $sidebarBg;
  overflow: hidden;

  .el-scrollbar {
    height: calc(100vh - $headerHeight);
  }

  .logo {
    position: relative;
    display: flex;
    justify-content: left;
    align-items: center;
    height: $headerHeight;
    background: $sidebarHighlight;
    // border-bottom: 1px solid #fff;
    .logo-img {
      position: absolute;
      top: 5px;
      left: 5px;
      width: 40px;
      height: 40px;
    }

    .logo-text {
      display: inline-block;
      font-size: 14px;
      margin: 0 0 0 50px;
      padding: 20px 0;
      color: #fff;
    }

  }

  // .title {
  //     display: flex;
  //     align-items: center;
  //     justify-content: center;
  //     width: 100%;
  //     height: $sidebarWidth;
  //     background-color: $mainColor;
  //     .content {
  //       display: flex;
  //       flex-direction: column;
  //       align-items: center;
  //       justify-content: center;
  //       width: 136px;
  //       height: 136px;
  //       border: 4px solid #fff;
  //       border-radius: 50%;
  //       background-color: $lightColor;
  //       font-size: 17px;
  //       font-weight: bold;
  //       color: $mainColor;
  //     }
  //     .svg-icon {
  //       margin-bottom: $gutterMini;
  //       font-size: 62px;
  //     }
  // }

  // reset element-ui css
  // .horizontal-collapse-transition {
  //   transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
  // }

  // .scrollbar-wrapper {
  //   overflow-x: hidden !important;
  // }

  // .el-scrollbar {
  //   height: calc(100% - $sidebarWidth);
  // }

  // .el-menu--vertical {
  //   border: none;
  // }

}
.el-sub-menu__title {
  color: #333;
}
.el-menu-item {
  color: #333;
}

.sidebar-container .el-menu,
.el-menu--popup.el-menu {
  border: none;
  background-color: $sidebarBg;
  transition: none;

  .el-menu-item:hover,
  .el-sub-menu__title:hover {
    color: $sidebarHighlight;
    background-color: transparent;
  }

  .el-menu-item.is-active {
    color: #fff;
    background-color: $sidebarHighlight;
  }
}

.hideSidebar {
  .sidebar-container {
    width: 54px !important;
  }

  .main-container {
    margin-left: 54px !important;
  }

  .logo {
    .logo-img {
      // margin-left: 4px;
    }
  }

  .el-menu-item {
    .el-tooltip__trigger,
    &.link {
      padding: 0 15px;
    }
  }

  .sub-menu-title-noDropdown {
    padding: 0 !important;
    position: relative;

    .el-tooltip {
      padding: 0 !important;

      .svg-icon {
        margin-left: 20px;
      }

      .sub-el-icon {
        margin-left: 19px;
      }
    }
  }

  .el-sub-menu {
    overflow: hidden;

    .el-tooltip__trigger {
      padding: 0 15px !important;
    }

    &>.el-sub-menu__title {

      // .svg-icon {
      //   margin-left: 20px;
      // }

      .sub-el-icon {
        margin-left: 19px;
      }

      .el-sub-menu__icon-arrow {
        display: none;
      }
    }
  }

  .el-menu--collapse {
    .el-sub-menu {
      &>.el-sub-menu__title {
        &>span {
          height: 0;
          width: 0;
          overflow: hidden;
          visibility: hidden;
          display: inline-block;
        }
      }
    }
  }
}

// mobile responsive
.mobile {
  .main-container {
    margin-left: 0px;
  }

  .sidebar-container {
    transition: transform .28s;
    width: $sidebarWidth !important;
  }

  &.hideSidebar {
    .sidebar-container {
      pointer-events: none;
      transition-duration: 0.3s;
      transform: translate3d(-$sidebarWidth, 0, 0);
    }
  }
}

.withoutAnimation {

  .main-container,
  .sidebar-container {
    transition: none;
  }
}